@import '../../common/common';


.home-page {
  width: $_750;
  height: auto;
  margin: auto;
  overflow: hidden;
  background-color: #fff;
  .header {
    width: 100%;
    height: $_74;
    background-color: #f40;
    background-image: url("../images/tb-logo.png");
    background-size: auto 55%;
    background-position: $_10 center;
    background-repeat: no-repeat;
    padding-left: $_76;
    padding-top: $_12;
    padding-right: $_14;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    z-index: 88;
  }

  .sreach-box {
    width: 100%;
    height: $_50;
    background-color: #B52600;
    border-radius: $_8;
  }

  .search-placeholder {
    width: 100%;
    text-align: center;
    line-height: $_50;
    color: #fff;
    font-size: $_26;

  }

  .search-placeholder span {
    position: relative;
  }

  .search-placeholder span:before {
    content: "";
    display: block;
    height: $_50;
    width: $_50;
    background-image: url("../images/sreach-ico.png");
    position: absolute;
    left: -$_46;
    background-size: 55% auto;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .content{
    position: relative;
    z-index: 11;
  }

  .banner {
    .swiper-wrapper {
      height: $_234;

      a {
        display: block;
        height: 100%;
        width: 100%;
      }

      img {
        height: 100%;
        width: 100%;
      }
    }

  }

  .other-business {
    overflow: hidden;
    border-bottom: 1px solid #eee;
    padding-bottom: $_12;

    .business {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .list {
      width: $_150;
      height: $_160;
      margin-left: $_30;
      padding-top: $_20;
      float: left;

      a {
        display: block;
        height: 100%;
        width: 100%;
      }

      .logo {
        height: $_90;
        width: $_90;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        margin: auto;
      }

      .tm {
        background-image: url("../images/tianmao.png");
      }

      .jhs {
        background-image: url("../images/juhuasuan.png");
      }

      .tsh {
        background-image: url("../images/taoshenghuo.png");
      }

      .tdd {
        background-image: url("../images/taodiandian.png");
      }

      .cz {
        background-image: url("../images/chongzhi.png");
      }

      .qua {
        background-image: url("../images/qua.png");
      }

      .ljb {
        background-image: url("../images/lingjinbi.png");
      }

      .xm {
        background-image: url("../images/leimu.png");
      }

      .logo-name {
        text-align: center;
        margin-top: $_12;
        color: #666;
        font-size: $_24;
      }

    }
  }

  .tb-toutiao{
    height: $_70;
  }

  .line-big{
    height: $_24;
    background: #ececec;
  }

  .toutiao-ico{
    width: $_164;
    float: left;
    height: 100%;
    background-image: url("../images/tb-tt.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-color: transparent;
    height: $_50;
    margin-top: $_10;
    border-right: 1px solid #ececec;
  }

  .toutiao-tp{
    height: 100%;
    float: left;
    width: $_580;
    color: #666;
    position: relative;
    padding-left: $_110;
  }

  .new-hot{
    position: absolute;
    left: $_24;
    top: $_14;
    display: block;
    font-size: $_28;
    color: #f40;
    height: $_40;
    line-height: $_38;
    padding: 0 $_4;
    border-radius: $_6;
    border: 1px solid #f40;
  }

  .new-text{
    line-height: $_70;
    font-size: $_28;
  }

  .gifs{
    overflow: hidden;
    padding-bottom: $_120;
  }

  .gifs-list{
    width: 50%;
    padding-bottom: $_40;
    border-bottom: 3px solid #ececec;
    float: left;
    position: relative;

    a{
      display: block;
      height: 100%;
      width: 100%;
    }
  }

  .gifs-list:nth-child(2n + 1):before{
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background: #ececec;
    right: 0;
    top: 0;
  }


  .gif-image{
    height: $_334;
    width: 100%;
    overflow: hidden;
  }

  .gif-info{
     padding: $_24 $_26;
     padding-bottom: 0;
  }

  .gif-text{
    color: #666;
    margin-bottom: $_20;
  }

  .gif-price{
    color: #f40;
    font-size: $_32;
  }

  .scroll-view{
    height: 500px;
    margin-top: $_74;
  }

  .footer-bar {
    position: fixed;
    width: 100%;
    height: $_86;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-top:1px solid #eee;
    z-index: 66;
    background: #fff;
  }

}